<template>
  <div class="shopcar-container">
    
    <div class="goods-list">

      <!-- 商品列表项区域 -->
      <div class="mui-card" v-for="(item, i) in goodslist" :key="item.cou">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
						
                    <mt-switch v-model="$store.getters.getGoodSelect[item.id]" @change="selectChange(item.id, $store.getters.getGoodSelect[item.id])"></mt-switch>
                    <img :src="item.pic_path">
                    <div class="info">
                        <h1>{{item.title}}</h1>
                        <div class="price">￥{{item.sell_price}}</div>
                        <p>
                            <numbox :initcount="$store.getters.getGoodCount[item.id]" :goodId="item.id"></numbox>
                            <a href="#" @click.prevent="remove(item.id, i)">删除</a>
                        </p>
                    </div>

                </div>
            </div>
        </div>

    </div>

    <!-- 结算区域 -->
    <div class="mui-card">
		<div class="mui-card-content">
			<div class="mui-card-content-inner jiesuan">
				<div class="left">
                    <p>总计（不含运费）</p>
                    <p>已勾选商品 <span class="red">{{$store.getters.getGoodsCountAndAmount.count}}</span> 件， 总价 <span class="red">￥{{$store.getters.getGoodsCountAndAmount.amount}}</span></p>
                </div>
                <mt-button type="danger">去结算</mt-button>
			</div>
		</div>
	</div>


    <p>{{ $store.getters.getGoodsSelected }}</p>

  </div>
</template>

<script>
import numbox from "../sub/shopinfo_numbox";

export default {
  data() {
    return {
      goodslist: [] // 购物车中所有商品的数据
    };
  },
  created() {
    this.getGoodsList();
  },
  methods: {
      getGoodsList() {
          this.$http.get("goodslist.json").then(result => {
                this.goodslist = result.body;
          });
      },
      remove(id, i) {
          this.goodslist.splice(i, 1);
          this.$store.commit('removeFormCar', id);
      },
      selectChange(id, val) {
          this.$store.commit('updataGoodsSelected', {
              id: id,
              selected: val
          });
      }
  },
  components: {
    numbox
  }
};
</script>

<style scoped>
.shopcar-container {
  background-color: #eee;
  overflow: hidden;
}
.goods-list .mui-card-content-inner {
    display: flex;
    align-items: center;
}
.goods-list img {
    width: 60px;
    margin-right:8px;
}
.goods-list h1 {
    font-size: 13px;
    font-weight: 400;
    height:36px;
    line-height:18px;
    overflow: hidden;
}
.goods-list .info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.goods-list .info .price {
    color: red;
    font-weight: bold;
}
.jiesuan {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.jiesuan .red {
    color: red;
    font-weight: bold;
    font-size: 16px;
}
</style>
